// webpack.config.js 指示webpack干什么活
let path = require('path');
// 打包html
// npm i html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 抽离css的插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    //webpack配置
    entry: './src/index.js', //入口
    // entry: './src/build/built.js',
    output: {
        path: path.resolve(__dirname, 'build') //打包后的出口
    },

    module: {
        rules: [
            // npm i css-loader style-loader -D
            {
                test: /\.css$/,
                use: [
                    // 'style-loader', //创建style标签，将js中得样式插入到head标签
                    MiniCssExtractPlugin.loader,
                    'css-loader', //将css文件变成commonjs模块加载到js中
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    // 'style-loader', //创建style标签，将js中得样式插入到head标签
                    MiniCssExtractPlugin.loader,//替换style-loader
                    'css-loader', //将css文件变成commonjs模块加载到js中
                    // npm i node-sass -d
                    // npm i sass-loader -d
                    'sass-loader'
                ]
            },
        ]

    },
    plugins: [
        // html-webpack-plugin
        new HtmlWebpackPlugin({
            // 复制一个'./src/index.html',并自动引入打包的所有资源（js/css）
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css", // 这里修改成filename: "main.css"
        }),
    ],
    // mode: {}
}